<div class="modal fade" id="question_modal" role="dialog">
    <div class="modal-dialog" style="width:50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title" id="myModalLabel">{{ title }}</h2>
            </div>
            <div class="modal-body">
                {% include "teacher/assignment/form.html" with form=form %}
                
                <!-- Error Message Box -->
                <div id="error_box" name="error_box" class="alert alert-danger alert-dismissable" hidden="true">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    ERROR: This is to be filled in by the "print_error" function. If you see this message that means there's an error with your javascript somewhere.
                </div><!-- /.Error Message Box -->
            </div>
            <div class="modal-footer">
                <button onclick="ajax_save_question({{ form.instance.question_id }});"
                             id="save_question_btn"
                           name="save_question_btn"
                           type="button"
                          class="btn btn-primary">
                    <i class="fa fa-check-circle"></i> Submit
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * Dynamic UI Code.
     *  To give our application a dynamic feel, the following jQuery code will be
     *  used to perform various UI changes.
     */
     $(document).ready(function(){
        $('#question_modal').on('hidden.bs.modal', function (e) {
            $('#question_modal').html('');
            $('#add_question_btn').prop("disabled", false);
            $('#edit_{{ form.instance.question_id }}_{{ form.instance.question_type }}_btn').prop("disabled", false);
        });
    });

    function ajax_save_question(question_id)
    {
        $('#save_question_btn').prop("disabled", true);
        
        // If no question_id was entered then set it to zero to tell our
        // controller that we are inserting a new question.
        if (typeof(question_id)==='undefined')
        {
            question_id = 0;
        }

        // Create a FormData Object using your form dom element and load
        // up the initial data first, then update it on question type.

        // Basic
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('question_type', $('#id_question_type').val());
        data.append('question_num', $('#id_question_num').val());
        data.append('question_id', question_id);
        data.append('title', $('#id_title').val());
        data.append('description', $('#id_description').val());

        // Multiple Choice
        data.append('a', $('#id_a').val());
        data.append('b', $('#id_b').val());
        data.append('c', $('#id_c').val());
        data.append('d', $('#id_d').val());
        data.append('e', $('#id_e').val());
        data.append('f', $('#id_f').val());
        data.append('a_is_correct', $('#id_a_is_correct').is(':checked'));
        data.append('b_is_correct', $('#id_b_is_correct').is(':checked'));
        data.append('c_is_correct', $('#id_c_is_correct').is(':checked'));
        data.append('d_is_correct', $('#id_d_is_correct').is(':checked'));
        data.append('e_is_correct', $('#id_e_is_correct').is(':checked'));
        data.append('f_is_correct', $('#id_f_is_correct').is(':checked'));

        // True/False Choice
        data.append('true_choice', $('#id_true_choice').val());
        data.append('false_choice', $('#id_false_choice').val());
        data.append('answer', $('#id_answer').is(':checked'));
        data.append('marks', $('#id_marks').val());

        // Response
        if ($('#id_question_type').val() == {{ RESPONSE_QUESTION_TYPE }})
        {
            data.append('answer', $('#id_answer').val());
        }

        jQuery.ajax({
            url: {{ assignment.assignment_id }} + '/save_question',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(json_result){
                // success code execution here
                if (json_result.status == "success")
                {
                    $('#question_modal').modal('hide');
                    ajax_refresh_questions_table();
                }
                else
                {
                    print_error(json_result.message);
                }
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
               // completion code here
               $('#save_question_btn').prop("disabled", false);
            }
        });

    }

    /**
     * Prints a error box with the contents of the errors received from the server.
     */
    function print_error(json_result)
    {
        $('#error_box').prop("hidden", false); // Display error box.
    
        // Iterate through the JSON array of arrays and generate an error string.
        var message = "<b>Error(s):</b><hr/>";
        var data = $.parseJSON(json_result)
        for (var key in data) {
            if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
                message += "<p>" + key + ": " + data[key] + "<p>";
            }
        }
    
        // Replace the error string with the contents of the error box.
        $('#error_box').html(message);
    }

</script>
